<!-- <attachment>
<filepath>daping/daping/src/components/Section.vue</filepath> -->
<!-- <content> -->
<template>
  <div class="section" @click="handleClick">
    <h2>{{ title }}</h2>
    <slot></slot>
    <div v-if="show" class="details">
      <p>{{ details }}</p>
      <!-- <audio v-if="music" :src="music" controls></audio> -->
    </div>
  </div>
</template>

<script>
import { ref } from "vue";

export default {
  name: "Section",
  props: {
    details: {
      type: String,
      required: true,
    },
    title: {
      type: String,
      required: true,
    },
    show: {
      type: Boolean,
      default: false,
    },
  },
  setup() {
    const showDetails = ref(false)
    let speech = null;
    const handleClick = () => {
      // showDetails.value = !showDetails.value;
      
    }
      

    return {
      showDetails,
      handleClick,
    };
  },
};
</script>

<style scoped>
.section {
  border: 1px solid #ccc;
  cursor: pointer;
  transition: background-color 0.3s;
}

.section:hover {
  background-color: #f0f0f0;
}

.details {
  margin-top: 10px;
  font-size: 0.9em;
  color: #555;
}
</style>
<!-- </content>
</attachment> -->
